<template>
  <div class="service-center-main">
    <div class="center-main-top">
      <div class="main-title">流程申请</div>
      <el-button type="text" class="operate" @click="goPage"
        >业务支撑<i class="el-icon-arrow-right"></i
      ></el-button>
    </div>
    <div class="center-main-content">
      <div
        class="content-process-type"
        v-for="item in definitionProcessList"
        :key="item.processDefinitionId"
        @click="goForm(item)"
      >
        <div class="content-process-type-title">
          <span class="type-img-one" v-if="item.processSort == 5">
            <img src="@/assets/home/apply-one.png" alt="" />
          </span>
          <span class="type-img-two" v-if="item.processSort == 8">
            <img
              src="@/assets/home/apply-two.png"
              alt=""
              v-if="item.processSort == 8"
            />
          </span>

          {{ item.processSortName }}
        </div>
        <span class="type-describe">{{ item.name }}</span>
      </div>
      <!--
      <div class="process-type-else">
        <div class="process-type-title">
          <span class="type-img-five">
            <img src="@/assets/home/apply-five.png" alt="" />
          </span>
          网络地址/域名/拨号
        </div>
        <span class="type-describe"
          >申请新增、变更、撤销网络地址/域名/拨号</span
        >
      </div> -->
    </div>
  </div>
</template>

<script>
import { getProcessDefinitionList } from "@/api/home/index.js";
export default {
  data() {
    return {
      definitionProcessList: [],
    };
  },
  methods: {
    goPage() {
      let router = this.$store.state.permission.sidebarRouters;
      let index = router.find((val) => {
        if (!val.hidden && val.path != "/") {
          return val.meta.title == "业务审批";
        }
      });
      if (!index) {
        this.$message({
          type: "error",
          message: "您没有数据的权限，请联系管理员添加权限!",
        });
        return;
      }
      this.$router.push({
        path: "/approval/internalApproval",
        query: { type: "业务审批" },
      });
    },
    async getProcessDefinitionList() {
      const result = await getProcessDefinitionList();
      this.definitionProcessList = result.data;
    },
    goForm(item) {
      this.$router.push({
        path: "/approval/internalApproval",
        query: { type: "业务审批", activeName: "first", detail: item },
      });
    },
  },
  mounted() {
    this.getProcessDefinitionList();
  },
};
</script>

<style lang="scss" scoped>
@function rem($args) {
  @return calc(100vh * #{$args} / 1080);
}
.service-center-main {
  height: 100%;
  .center-main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .operate {
      color: #2751d0;
    }
  }
  .common-process {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: rem(15) rem(20);
    border-radius: rem(10);
    background: #eff2fe;
    box-sizing: border-box;
  }
  .center-main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    height: calc(100% - #{rem(40)});
    overflow: auto;
    gap: rem(10);
    .content-process-type {
      width: 48%;
      height: rem(80);
      @extend .common-process;
      &-title {
        display: flex;
        align-items: center;
        gap: rem(10);
        font-size: rem(20);
      }
      &:hover {
        cursor: pointer;
      }
    }
    .process-type-else {
      width: 100%;
      @extend .common-process;
      &:hover {
        cursor: pointer;
      }
    }
    .type-describe {
      font-size: rem(18);
      font-weight: bold;
      opacity: 0.9;
    }
    .type-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: rem(30);
      height: rem(25);
      border-radius: 3px;
      opacity: 1;
      img {
        display: block;
        margin: auto;
        width: rem(16);
        height: rem(14);
        opacity: 1;
      }
    }
    .type-img-one {
      background: linear-gradient(36deg, #eca046 16%, #f9cca2 66%);
      @extend .type-img;
    }
    .type-img-two {
      background: linear-gradient(
        180deg,
        #86e3e7 12%,
        rgba(24, 155, 191, 0.8) 100%
      );
      @extend .type-img;
    }
    .type-img-three {
      background: linear-gradient(
        180deg,
        #84b5fd 12%,
        rgba(71, 107, 219, 0.8) 100%
      );
      @extend .type-img;
    }
    .type-img-four {
      background: linear-gradient(36deg, #ec6246 16%, #f9b5a2 89%);
      @extend .type-img;
    }
    .type-img-five {
      background: linear-gradient(
        180deg,
        #a8a6fa 12%,
        rgba(68, 35, 168, 0.8) 100%
      );
      @extend .type-img;
    }
  }
}
::v-deep .el-button--medium{
  padding-top:0 !important;
}
</style>